<!DOCTYPE html>
<html>
<head>
<title>Thin Film Coating</title>
</head>
<body>

<canvas id="physicsCanvas" width="550" height="400"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Clear canvas and set background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Set drawing style for lines
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';

// --- Main drawing starts here ---

// Define coordinates
const y_top = 150;
const y_bottom = 200;
const x_start = 50;
const x_end = 500;
const x_ray = 120;
const gap_half_width = 5;
const x_gap_start = x_ray - gap_half_width;
const x_gap_end = x_ray + gap_half_width;

// Draw top interface (air-film) in two parts to leave a gap
ctx.beginPath();
ctx.moveTo(x_start, y_top);
ctx.lineTo(x_gap_start, y_top);
ctx.moveTo(x_gap_end, y_top);
ctx.lineTo(x_end, y_top);
ctx.stroke();

// Draw bottom interface (film-lens) in two parts to leave a gap
ctx.beginPath();
ctx.moveTo(x_start, y_bottom);
ctx.lineTo(x_gap_start, y_bottom);
ctx.moveTo(x_gap_end, y_bottom);
ctx.lineTo(x_end, y_bottom);
ctx.stroke();

// Draw hatching lines for the film and lens
const hatchLength = 12;
const hatchAngle = Math.PI / 3.5; // ~51 degrees
const hatchStep = 20;

ctx.lineWidth = 2.5;
// Hatching for film (below top interface)
for (let x = x_start + hatchStep; x <= x_end; x += hatchStep) {
    if (x > x_gap_start - 10 && x < x_gap_end + 10) continue; // Skip hatching near the ray
    ctx.beginPath();
    ctx.moveTo(x, y_top);
    ctx.lineTo(x - hatchLength * Math.cos(hatchAngle), y_top + hatchLength * Math.sin(hatchAngle));
    ctx.stroke();
}

// Hatching for lens (below bottom interface)
for (let x = x_start + hatchStep; x <= x_end; x += hatchStep) {
    if (x > x_gap_start - 10 && x < x_gap_end + 10) continue;
    ctx.beginPath();
    ctx.moveTo(x, y_bottom);
    ctx.lineTo(x - hatchLength * Math.cos(hatchAngle), y_bottom + hatchLength * Math.sin(hatchAngle));
    ctx.stroke();
}
ctx.lineWidth = 3;

// Draw incident ray
const y_ray_start = 100;
ctx.beginPath();
ctx.moveTo(x_ray, y_ray_start);
ctx.lineTo(x_ray, y_top);
ctx.stroke();

// Draw arrowhead for incident ray
const arrowHeadSize = 10;
ctx.beginPath();
ctx.moveTo(x_ray, y_top);
ctx.lineTo(x_ray - arrowHeadSize / 1.5, y_top - arrowHeadSize);
ctx.moveTo(x_ray, y_top);
ctx.lineTo(x_ray + arrowHeadSize / 1.5, y_top - arrowHeadSize);
ctx.stroke();

// Draw the jagged line indicating path/thickness
ctx.beginPath();
ctx.moveTo(x_ray, y_top);
ctx.lineTo(x_ray + 2, y_top + 5);
ctx.lineTo(x_ray - 1, y_top + 10);
ctx.lineTo(x_ray, y_top + 15);
ctx.lineTo(x_ray + 1, y_top + 20);
ctx.lineTo(x_ray - 2, y_top + 25);
ctx.lineTo(x_ray, y_top + 30);
ctx.lineTo(x_ray + 1, y_top + 35);
ctx.lineTo(x_ray - 1, y_top + 40);
ctx.lineTo(x_ray, y_top + 45);
ctx.lineTo(x_ray, y_bottom);
ctx.lineTo(x_ray - 2, y_bottom + 10);
ctx.lineTo(x_ray + 2, y_bottom + 20);
ctx.lineTo(x_ray - 1, y_bottom + 30);
ctx.lineTo(x_ray + 1, y_bottom + 40);
ctx.lineTo(x_ray, y_bottom + 50);
ctx.stroke();

// Add text labels
const baseFont = '"Comic Sans MS", cursive, sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';

// n₀ = 1.0
ctx.font = `bold 26px ${baseFont}`;
ctx.fillText('n', 220, 120);
ctx.font = `bold 18px ${baseFont}`;
ctx.fillText('0', 236, 125);
ctx.font = `bold 26px ${baseFont}`;
ctx.fillText('= 1.0', 250, 120);

// n₁ = 1.2
ctx.font = `bold 26px ${baseFont}`;
ctx.fillText('n', 400, 180);
ctx.font = `bold 18px ${baseFont}`;
ctx.fillText('1', 416, 185);
ctx.font = `bold 26px ${baseFont}`;
ctx.fillText('= 1.2', 430, 180);

// n₂ = 1.4
ctx.font = `bold 26px ${baseFont}`;
ctx.fillText('n', 400, 235);
ctx.font = `bold 18px ${baseFont}`;
ctx.fillText('2', 416, 240);
ctx.font = `bold 26px ${baseFont}`;
ctx.fillText('= 1.4', 430, 235);

// "lens"
ctx.font = `bold 26px ${baseFont}`;
ctx.fillText('lens', 200, 235);

// "Fig. 2.15"
ctx.textAlign = 'center';
ctx.font = `bold 26px ${baseFont}`;
ctx.fillText('Fig. 2.15', canvas.width / 2, 350);
</script>

</body>
</html>